<template>
    <div class="signUp">
        <div class="login-container">
            <div class="login-wrap reg-wrap">
                <div class="logo">
                    <img src="../../assets/image/logo.png" />
                    <p>奢批数字供应链系统</p>
                </div>
                <ul class="dlfs-ul">
                    <li
                        :class="activeClass == index ? 'active' : ''"
                        v-for="(itme, index) in loginTab"
                        :key="index"
                        @click="onTab(index)"
                    >
                        {{ itme }}
                    </li>
                </ul>
                <div class="dlfs-content clearFix">
                    <div
                        class="dlfs-wrap clearFix"
                        v-if="activeClass == 0"
                        style="display: block;"
                    >
                        <el-form
                            class=""
                            el-form
                            ref="signups"
                            :model="signups"
                            :rules="loginRules6"
                        >
                            <div
                                v-if="activeClass == 0"
                                class="dlfs-wrap clearFix"
                                style="display: block;"
                            >
                                <el-form-item
                                    class="layui-form-item margin-top-40"
                                    el-form-item
                                    prop="phone"
                                >
                                    <el-input
                                        required
                                        v-model.trim="signups.phone"
                                        placeholder="输入手机号"
                                        maxlength="11"
                                        onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
                                        class="layui-input inputStyle"
                                        lay-verType="msg"
                                    />
                                </el-form-item>

                                <div class="layui-form-item margin-top-60">
                                    <el-form-item
                                        class="verification"
                                        prop="VerificationCode"
                                    >
                                        <el-input
                                            v-model.trim="
                                                signups.VerificationCode
                                            "
                                            required
                                            placeholder="输入验证码"
                                            maxlength="6"
                                            class="layui-input inputStyle"
                                            lay-verType="msg"
                                        />
                                        <p
                                            href=""
                                            v-if="Show1 == true"
                                            class="hqyzm"
                                            @click="
                                                getCodePhone(), (Count1 = 60)
                                            "
                                        >
                                            获取验证码
                                        </p>
                                        <el-button
                                            v-if="Show1 == false"
                                            class="hqyzm"
                                            style="margin: 3px 0 0 0;"
                                            >{{ Count1 }}s</el-button
                                        >
                                    </el-form-item>
                                </div>

                                <div class="layui-form-item margin-top-60">
                                    <el-form-item prop="userPwd1">
                                        <el-input
                                            type="password"
                                            v-model.trim="signups.userPwd1"
                                            required
                                            placeholder="输入密码"
                                            maxlength="20"
                                            class="layui-input inputStyle"
                                            lay-verType="msg"
                                        />
                                    </el-form-item>
                                </div>
                                <div class="layui-form-item margin-top-60">
                                    <el-form-item prop="userPwd2">
                                        <el-input
                                            type="password"
                                            v-model.trim="signups.userPwd2"
                                            required
                                            placeholder="确认密码"
                                            maxlength="20"
                                            class="layui-input inputStyle"
                                            lay-verType="msg"
                                        />
                                    </el-form-item>
                                </div>
                                <div
                                    class="layui-form-item login-auto margin-top-30"
                                >
                                    <div class="layui-input-inline">
                                        <el-checkbox v-model="checked1">
                                            <span>请勾选</span>
                                            <span
                                                @click="getAgreement()"
                                                style="color:#409EFF;"
                                                >《电子会员协议》</span
                                            >
                                        </el-checkbox>
                                    </div>
                                </div>
                                <el-button
                                    type="primary"
                                    @click="submitbtn('signups'), (itme = 60)"
                                    class="login-btn margin-top-30"
                                    :disabled="!checked1"
                                    >注册</el-button
                                >
                                <div class="layui-form-item margin-top-40">
                                    <p class="zhdl">
                                        使用已有
                                        <b
                                            @click="insuranceInformation"
                                            class="c3E95F0"
                                            >账户登录</b
                                        >
                                    </p>
                                </div>
                            </div>
                        </el-form>
                    </div>
                    <div
                        class="dlfs-wrap clearFix"
                        style="display: block;"
                        v-if="activeClass == 1"
                    >
                        <el-form
                            class=""
                            el-form
                            ref="registErmail"
                            :model="registErmail"
                            :rules="loginRules7"
                        >
                            <div
                                v-if="activeClass == 1"
                                class="dlfs-wrap clearFix"
                                style="display: block;"
                            >
                                <el-form-item
                                    class="layui-form-item margin-top-40"
                                    el-form-item
                                    prop="username"
                                >
                                    <el-input
                                        required
                                        v-model.trim="registErmail.username"
                                        placeholder="输入邮箱账号"
                                        maxlength="50"
                                        class="layui-input inputStyle"
                                        lay-verType="msg"
                                    />
                                </el-form-item>
                                <div class="layui-form-item margin-top-60">
                                    <el-form-item prop="code" class="password">
                                        <el-input
                                            v-model.trim="registErmail.code"
                                            required
                                            placeholder="输入验证码"
                                            maxlength="6"
                                            class="layui-input inputStyle"
                                            lay-verType="msg"
                                        />
                                        <p
                                            href=""
                                            v-if="Show2 == true"
                                            class="hqyzm"
                                            @click="getCode(), (Count2 = 60)"
                                        >
                                            获取验证码
                                        </p>
                                        <el-button
                                            v-if="Show2 == false"
                                            class="hqyzm"
                                            style="margin: 3px 0 0 0;"
                                            >{{ Count2 }}s</el-button
                                        >
                                    </el-form-item>
                                </div>
                                <div class="layui-form-item margin-top-60">
                                    <el-form-item prop="userPwd3">
                                        <el-input
                                            type="password"
                                            v-model.trim="registErmail.userPwd3"
                                            required
                                            placeholder="设置密码"
                                            maxlength="20"
                                            class="layui-input inputStyle"
                                            lay-verType="msg"
                                            autocomplete="off"
                                        />
                                    </el-form-item>
                                </div>
                                <div class="layui-form-item margin-top-60">
                                    <el-form-item prop="userPwd4">
                                        <el-input
                                            type="password"
                                            v-model.trim="registErmail.userPwd4"
                                            required
                                            placeholder="确认密码"
                                            maxlength="20"
                                            class="layui-input inputStyle"
                                            lay-verType="msg"
                                            autocomplete="off"
                                        />
                                    </el-form-item>
                                </div>
                            </div>
                        </el-form>
                        <div class="layui-form-item login-auto margin-top-30">
                            <div class="layui-input-inline">
                                <el-checkbox v-model="checked2">
                                    <span>请勾选</span>
                                    <span
                                        @click="getAgreement()"
                                        to=""
                                        style="color:#409EFF;"
                                        >《电子会员协议》</span
                                    >
                                </el-checkbox>
                            </div>
                        </div>
                        <el-button
                            type="primary"
                            @click="submitForm('registErmail')"
                            class="login-btn margin-top-30"
                            :disabled="!checked2"
                            >注册</el-button
                        >
                        <div class="layui-form-item margin-top-40">
                            <p class="zhdl">
                                使用已有
                                <b @click="insuranceInformation" class="c3E95F0"
                                    >账户登录</b
                                >
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 电子会员协议 -->
        <el-dialog
            title="电子会员协议"
            :visible.sync="dialogVisible"
            width="60%"
        >
            <!-- :before-close="handleClose" -->
            <div v-html="getAgreementCon"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getCodeImg,
    getCode,
    phoneSignIn,
    emailSignIn,
    Agreements
} from "@/api/login";
import { addUser, registermails, getEmail } from "@/api/biz/userRegister";
import { Agreements1 } from "@/api/biz/agreements.js";

export default {
    name: "signUp",
    watch: {
        activeClass: function(val, oldVla) {
            if (this.$refs["signups"] != undefined) {
                this.$refs["signups"].resetFields();
            }
            if (this.$refs["registErmail"] != undefined) {
                this.$refs["registErmail"].resetFields();
            }
        }
    },
    data() {
        var checkPhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("手机号不能为空"));
            } else {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                // console.log(reg.test(value));
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error("请输入正确的手机号"));
                }
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.signups.userPwd1) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        var validatePass3 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.registErmail.userPwd3) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            loginTab: ["手机号注册", "邮箱注册"],
            activeClass: 0,
            loading: false,
            redirect: undefined,
            // 账号注册
            signups: {
                phone: "",
                userPwd1: "",
                userPwd2: "",
                VerificationCode: ""
            },
            // 邮箱注册
            registErmail: {
                username: "",
                userPwd3: "",
                userPwd4: "",
                code: ""
            },
            // 验证码倒计时
            time1: "获取验证码",
            time2: "获取验证码",
            // 验证规则
            // 账户注册
            loginRules6: {
                phone: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "手机号不能为空"
                    },
                    { validator: checkPhone, trigger: "blur" },
                    {
                        pattern: /^[A-Za-z0-9u4e00-u9fa5]+$/,
                        message: "不允许输入空格等特殊符号"
                    }
                ],
                userPwd1: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "设置密码不能为空"
                    },
                    {
                        required: true,
                        trigger: "blur",
                        min: 6,
                        max: 20,
                        message: "密码需长度在 6 到 20 个字符之间"
                    },
                    {
                        pattern: /^[A-Za-z0-9u4e00-u9fa5]+$/,
                        message: "不允许输入空格等特殊符号"
                    }
                ],
                userPwd2: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "确认密码不能为空"
                    },
                    {
                        required: true,
                        trigger: "blur",
                        min: 6,
                        max: 20,
                        message: "密码需长度在 6 到 20 个字符之间"
                    },
                    {
                        pattern: /^[A-Za-z0-9u4e00-u9fa5]+$/,
                        message: "不允许输入空格等特殊符号"
                    },
                    { validator: validatePass2, trigger: "blur" }
                ],
                VerificationCode: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "验证码不能为空"
                    },
                    {
                        pattern: /^[A-Za-z0-9u4e00-u9fa5]+$/,
                        message: "不允许输入空格等特殊符号"
                    }
                ]
            },
            // 邮箱注册
            loginRules7: {
                username: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "邮箱不能为空"
                    },
                    {
                        min: 6,
                        max: 50,
                        message: "邮箱长度在 6 到 50 个字符之间",
                        trigger: "blur"
                    }
                ],
                userPwd3: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "设置密码不能为空"
                    },
                    {
                        required: true,
                        trigger: "blur",
                        min: 6,
                        max: 20,
                        message: "密码需长度在 6 到 20 个字符之间"
                    },
                    {
                        pattern: /^[A-Za-z0-9u4e00-u9fa5]+$/,
                        message: "不允许输入空格等特殊符号"
                    }
                ],
                userPwd4: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "确认密码不能为空"
                    },
                    {
                        required: true,
                        trigger: "blur",
                        min: 6,
                        max: 20,
                        message: "密码需长度在 6 到 20 个字符之间"
                    },
                    {
                        pattern: /^[A-Za-z0-9u4e00-u9fa5]+$/,
                        message: "不允许输入空格等特殊符号"
                    },
                    { validator: validatePass3, trigger: "blur" }
                ],
                code: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "验证码不能为空"
                    },
                    {
                        pattern: /^[A-Za-z0-9u4e00-u9fa5]+$/,
                        message: "不允许输入空格等特殊符号"
                    }
                ]
            },
            checked1: false,
            checked2: false,
            // 倒计时 (手机)
            Show1: true,
            Count1: "",
            Timer1: null,
            // 倒计时(邮箱)
            Show2: true,
            Count2: "",
            Timer2: null,
            getAgreementCon: "",
            dialogVisible: false
        };
    },
    methods: {
        insuranceInformation() {
            this.$emit("showInsurInformation");
        },
        onTab(index) {
            this.activeClass = index;
            // console.log(index);
        },
        // 获取验证码(手机号-注册)
        getCodePhone() {
            if (this.signups.phone.length == 11) {
                this.Show1 = false;
                const TIME_COUNT = 60;
                if (!this.Timer1) {
                    this.Count1 = TIME_COUNT;
                    this.Show1 = false;
                    this.Timer1 = setInterval(() => {
                        if (this.Count1 > 0 && this.Count1 <= TIME_COUNT) {
                            this.Count1--;
                        } else {
                            this.Show1 = true;
                            clearInterval(this.timer1);
                            this.timer1 = null;
                        }
                    }, 1000);
                }

                // getCodeImg().then(res => {
                //     console.log(res)
                //     this.codeUrl = 'data:image/gif;base64,' + res.img;
                //     this.loginForm.uuid = res.uuid;
                // });
                let datas = {
                    phone: this.signups.phone
                };
                getCode(datas).then(res => {
                  //  console.log(res);
                });
            }
        },
        //手机号注册
        submitbtn() {
            this.$refs.signups.validate(valid => {
                if (valid) {
                    this.loading = true;
                    let datas = {
                        password: this.signups.userPwd1,
                        phonenumber: this.signups.phone,
                        phoneCode: this.signups.VerificationCode
                    };
                    addUser(datas).then(res => {
                        if (res.code === 200) {
                            this.msgSuccess("注册成功");
                            this.insuranceInformation();
                        } else {
                            this.msgError(res.msg);
                        }
                        // this.$router.push({ path: this.redirect || '/' });
                    });
                }
            });
        },
        // 邮箱注册
        submitForm: function() {
            this.$refs.registErmail.validate(valid => {
                if (valid) {
                    this.loading = true;
                    let datas = {
                        email: this.registErmail.username,
                        password: this.registErmail.userPwd3,
                        emailCode: this.registErmail.code
                    };
                    registermails(datas).then(response => {
                        if (response.code === 200) {
                            this.msgSuccess("注册成功");
                            this.insuranceInformation();
                        } else {
                            this.msgError(response.msg);
                        }
                        this.$router.push({ path: this.redirect || "/" });
                    });
                }
            });
        },
        // 获取验证码(邮箱-注册)
        getCode() {
            if (this.registErmail.username != "") {
                this.Show2 = false;
                const TIME_COUNT = 60;
                if (!this.Timer2) {
                    this.Count2 = TIME_COUNT;
                    this.Show2 = false;
                    this.Timer2 = setInterval(() => {
                        if (this.Count2 > 0 && this.Count2 <= TIME_COUNT) {
                            this.Count2--;
                        } else {
                            this.Show2 = true;
                            clearInterval(this.timer2);
                            this.timer2 = null;
                        }
                    }, 1000);
                }
                let datas = {
                    email: this.registErmail.username
                };
                getEmail(datas).then(res => {
                   // console.log(res);
                });
            }
        },
        // 请求协议
        getAgreement() {
            this.getAgreementCon =
                "电子会员协议电子会员协议电子会员协议电子会员协议电子会员协议电子会员协议电子会员协议电子会员协议电子会员协议";
            this.dialogVisible = true;
            // Agreements1().then(res => {
            //     console.log(res);
            //     this.getAgreementCon = "csdcdscdscsdcsdcdscsd";
            //     this.dialogVisible = true;
            // });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
/* 登录 */
.signUp {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-size: cover;
    background: url("../../assets/image/login-bg.png") no-repeat;
}
body {
    font-size: 62.5% !important;
}
.reg-wrap .layui-form-item {
    margin: 2.5rem auto !important;
}
.margin-top-30 {
    margin-top: 1.875rem !important;
}

.login-container {
    /* width: 1920px;
	height: 1080px; */
    width: 100%;
    height: 100%;
    min-height: 760px;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.login-wrap {
    width: 44.625rem;
    padding-bottom: 1.875rem;
    background: #ffffff;
    border-radius: 2.5rem;
    border: 0.375rem solid rgba(255, 255, 255, 0.31);
    float: right;
    margin-right: -84.4rem;
}

.login-wrap .logo {
    text-align: center;
    padding-top: 2.9375rem;
}

.login-wrap .logo p {
    font-size: 2.375rem;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: rgba(8, 20, 38, 1);
}

.dlfs-ul {
    text-align: center;
    margin-top: 3.5625rem;
}

.dlfs-ul li {
    display: inline-block;
    _display: initial;
    *display: initial;
    *zoom: 1;
    color: #bababa;
    font-size: 1.25rem;
    margin: 0 1rem;
    position: relative;
    padding-bottom: 0.8125rem;
    cursor: pointer;
}

.dlfs-ul li.on {
    color: #000000;
}

.dlfs-ul li.on:after {
    content: "";
    width: 100%;
    height: 0.25rem;
    background: rgba(0, 0, 0, 1);
    border-radius: 0.125rem;
    position: absolute;
    left: 0;
    bottom: 0;
}

.layui-form-item {
    margin: 3.75rem auto !important;
}

.reg-wrap .layui-form-item {
    margin: 2.5rem auto !important;
}

.reg-wrap .login-auto {
    margin: 0 9.375rem 0 9.0625rem !important;
}

.layui-form-item .login-list {
    width: 30.875rem;
    height: 5rem;
    line-height: 5rem;
    background: #f8f8f8;
    border-radius: 2.5rem;
    margin: 0 auto;
    float: inherit;
    position: relative;
}

.layui-form-item .login-list .layui-input {
    width: 100%;
    height: 100%;
    padding: 0 2.5rem;
    font-size: 1.375rem;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #cbcbcb;
    background: none;
    border: none;
}

.login-list .hzm {
    width: 19.6875rem !important;
    float: left;
}

.login-list .hqyzm {
    font-size: 1.375rem;
    color: #3893f3;
    float: left;
    position: relative;
    padding-left: 1.75rem;
}

.login-list .hqyzm::after {
    content: "";
    width: 0.125rem;
    height: 3.5rem;
    background: rgba(234, 234, 234, 1);
    position: absolute;
    top: 50%;
    margin-top: -1.75rem;
    left: 0;
}

.login-auto {
    margin: 0 9.375rem 0 9.0625rem !important;
}

.login-auto .layui-input-inline input[type="checkbox"] {
    width: 0.9375rem;
    height: 0.9375rem;
    background: #f4f4f4;
    margin-right: 0.625rem;
    font-size: 1.125rem;
    color: #333333;
}

.login-auto .layui-input-inline .wjmm {
    font-size: 1.125rem;
    color: #333333;
}

.login-btn {
    display: block;
    width: 30.875rem;
    height: 5rem;
    background: #3e95f0;
    border-radius: 2.5rem;
    margin: 3.625rem auto 0;
    font-size: 1.625rem;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #ffffff;
    border: none;
    text-align: center;
}

.login-auto .qtfs {
    line-height: 1.625rem;
}

.login-qtfs {
    margin: 3.625rem 9.375rem 0 7.75rem !important;
}

.login-qtfs .qtfs {
    width: auto !important;
}

.login-qtfs .qtfs a {
    margin-left: 1.5625rem;
}

.login-qtfs .qtfs a img {
    height: 1.625rem;
}

.zhdl {
    text-align: center;
    font-size: 13px;
}
.zhdl b {
    cursor: pointer;
}
.reg-wrap {
    /* height: 62.4375rem; */
    /* margin-top: 2.5rem; */
    padding-bottom: 1.875rem;
}

input::-webkit-input-placeholder {
    /*Webkit browsers*/
    color: #cbcbcb;
}

input:-moz-placeholder {
    /*Mozilla Firefox 4 to 8*/
    color: #cbcbcb;
}

input::moz-placeholder {
    /*Mozilla Firefox 19+*/
    color: #cbcbcb;
}

input:-ms-input-placeholder {
    /*Internet Explorer 10+*/
    color: #cbcbcb;
}
.dlfs-wrap {
    display: none;
}

.active {
    color: #000000;
}
.signUp .password {
    position: relative;
}
.signUp .password .blue {
    position: absolute;
    top: 7px;
    right: 20px;
    color: #3893f3;
    font-size: 14px;
    cursor: pointer;
}
/* .active:after {
  content: "";
  width: 100%;
  height: 0.25rem;
  background: rgba(0, 0, 0, 1);
  border-radius: 0.125rem;
  position: absolute;
  left: 0;
  bottom: 0;
} */
</style>
